开源|Magpie:58 跨平台技术应用及 Flutter 实践概览
开源项目专题系列(八)
1.开源项目名称:magpie,magpie_sdk,magpie_fly,magpie_log
2.github地址:
https://github.com/wuba/magpie
https://github.com/wuba/magpie_sdk
https://github.com/wuba/magpie_fly
https://github.com/wuba/magpie_log
3.简介:58跨平台技术应用实践, 现有Hybrid、ReactNative、小程序跨平台框架的性能问题。介绍58对Flutter混合工程的工程化思考,及Magpie一体化解决方案平台概览,于2020年4月份开源。
58跨平台技术应用
webview的碎片化,适配成本高:Android 4.4之前是webkit内核,4.4之后是chromium内核,第三方的X5内核;iOS 8.0之前是UIWebview,8.0之后是WKWebview; Javascript的解释运行,性能差:渲染及逻辑都由JS负责,加上JS的解释执行,交互效果比较差; JSBridge通信成本高:数据量传输限制,通信频繁且异步通信;
Javascript的解释运行:业务逻辑及MVVM的diff操作都由JS负责,同时JS解释运行,导致Javascript Thread的掉帧严重; 过度依赖Bridge且异步通信:当列表快速滑动且有大量业务通信时,容易出现白屏,优化成本很高; 依赖OEM Widgets导致适配成本高:需要分别适配不同平台。
Javascript的解释运行 过度依赖Native通信 无法复用现有的OEM Widgets
Flutter
Flutter is an app SDK for building high-performance, high-fidelity apps for iOS, Android, web, and desktop from a single codebase.
Flutter的灵感来自于React,并从底层实现解决了ReactNative的问题,通过官方文档可得知如下典型特点:
Debug采用JIT编译为字节码,实现Hot reload;Release采用AOT编译为机器码,实现静态编译运行,大大提升运行效率; 不依赖OEM Widgets,直接通过Skia渲染,减少平台适配工作; 不依赖Bridge,直接通过Skia渲染,大大减少Bridge通信成本。
声明式布局,一切都是Widget,同样的业务,代码比Java要少将近一半的代码 不依赖OEM Widgest,基于Skia,统一UI,减少平台适配工作; Debug的JIT编译,热加载(hot reload); 全栈(iOS,Android,脚手架,Web,Desktop),减少不同语言的学习成本。
Flutter工程化上的问题
工程化即系统化、模块化、规范化的一个过程。目的在于提升软件开发效率,降低工程实施难度。
混合开发框架:不同角色的代码及编译解藕,add to app的Dart视角的编译会藕合Native代码,只有Widgets的变更时,Hod Reload才会生效,而Cold Reload的编译时间过长; 模块化 & 组件化:由于商业应用的业务很复杂,需要模块化能力,实现分业务线的并行开发;由于功能的复杂及类似,需要组件化来实现Widgets的复用,提升效率; 编译:在不同角色的解藕的基础上,实现快速方便的整体编译。
Magpie开源项目
magpie:类似Expo的Managed Workflow的可视化管理流程,整合每个阶段的工具,使用Dart全栈实现
magpie_sdk:与 magpie 可视化管理流程配套的 Native SDK
magpie_fly:Widgets管理App及组件库
magpie_log:可视化圈选埋点框架
Flutter工程化的关键是实现Dart视角的创建、开发、编译、发布流程自动化及可视化。同时可以不断扩展新工具,不断扩大自动化的范围,不断提升开发效率。magpie_workflow开源项目就是为了这个目标而打造的可视化管理平台,现已经包含了开发阶段及开发部署过程中的大部分工具及能力。后续会不断增加新的功能。
另一个影响开发效率的是组件库,如果能实现文档及效果的快速预览,全业务同学能快速便捷的贡献新的组件,可以大幅提升开发效率,magpie_fly开源项目基于这个目标,参考Material-UI的效果,实现快速预览及贡献。
大部分的产品决策都是由数据驱动,数据驱动的关键是埋点,Native经过不断的发展,从最初的手动埋点,到现在主流的可视化圈选埋点、无痕埋点等自动埋点方案。由于Flutter是基于MVVM的响应式UI框架,分为Widgets、Elements、RenderObject三层,基于属性做Widgets编程,无法直接复用Native的xpath思想来实现圈选埋点。magpie_log可视化圈选项目如何实现类似xpath的唯一控件ID定位,敬请期待接下来的直播分享。
展望
参考文献
添加小秘书微信后由小秘书拉您进项目交流群
END